<!DOCTYPE html>  <!--文档声明-->
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">  <!--英文的编码状态-->
<head th:fragment="head(title)">  <!--不可见内容-->
    <meta charset="UTF-8">  <!--编码格式-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0"><!--适配手机浏览-->
    <title th:replace="${title}">三岁的博客 - 人间本不该令我这么欣喜的，但是你来了！！</title>   <!--标题-->
    <link rel="stylesheet" href="../static/css/dist/semantic.min.css"
          th:href="@{/lib/semanticui/dist/semantic.min.css}"><!--引入css样式-->
    <link rel="stylesheet" href="../../../static/css/typo.css" th:href="@{/css/typo.css}">
    <link rel="stylesheet" href="../../../static/css/animate.css" th:href="@{/css/animate.css}">
    <link rel="stylesheet" href="../../../static/css/me.css" th:href="@{/css/me.css}">
    <link rel="stylesheet" href="../../../static/lib/prism/prism.css" th:href="@{/lib/prism/prism.css}">
    <link rel="stylesheet" href="../../../static/lib/tocbot/tocbot.css" th:href="@{/lib/tocbot/tocbot.css}">
    <link rel="shortcut icon" href="../../../static/images/favicon.ico" th:href="@{/images/favicon.ico}"/>
    <link rel="stylesheet" href="../../../static/lib/aplayer/APlayer.min.css" th:href="@{/lib/aplayer/APlayer.min.css}">
    <link rel="stylesheet" href="../../../static/css/error.css" th:href="@{/css/error.css}">

    <style type="text/css">
        .blink {
            position: relative;
        }

        .blink:nth-child(1) {
            -webkit-animation: jump 1s linear 0s infinite alternate;
        }

        @-webkit-keyframes jump {
            0% {
                top: 0px;
            }
            50% {
                top: -2px;
            }
            100% {
                top: 3px;
            }
        }

    </style>
</head>
<!--内容编写区-->
<body>
<!--导航-->
<nav th:fragment="menu(n)" class="ui attached segment m-padded-tb-mini animated bounce">
    <div class="ui container">
        <div class="ui secondary stackable menu">
            <h2 class="ui black header item">三岁Blog</h2>
            <a href="#" th:href="@{/index}" class="m-item item m-mobile-hide-item" th:classappend="${n==1} ? 'active'"><i
                    class="mini home icon"></i>&nbsp&nbsp首页</a>
            <span class="m-mobile-hide" style="width: 1px;margin-top: 20px;height: 20px; background: darkgray;"></span>
            <a href="#" th:href="@{/types}" class="m-item item m-mobile-hide-item"
               th:classappend="${n==2} ? 'active'"><i
                    class="mini idea icon"></i>&nbsp&nbsp分类</a>
            <span class="m-mobile-hide" style="width: 1px;margin-top: 20px;height: 20px; background: darkgray;"></span>
            <a href="#" th:href="@{/tags}" class="m-item item m-mobile-hide-item" th:classappend="${n==3} ? 'active'"><i
                    class="mini tags icon"></i>&nbsp&nbsp标签</a>
            <span class="m-mobile-hide" style="width: 1px;margin-top: 20px;height: 20px; background: darkgray;"></span>
            <a href="#" th:href="@{/archives}" class="m-item item m-mobile-hide-item"
               th:classappend="${n==4} ? 'active'"><i
                    class="mini clone icon"></i>&nbsp&nbsp归档</a>
            <span class="m-item item m-mobile-hide">
            <iframe scrolling="no" src="https://tianqiapi.com/api.php?style=tv&skin=durian" frameborder="0" width="255"
                    height="25" allowtransparency="true"></iframe>
            </span>
            <div class="m-item right item m-mobile-hide-item">
                <form name="search" action="#" th:action="@{/search}" method="get" target="_blank">
                    <div class="ui icon inverted input"><!--transparent 属性是设置全透明黑色-->
                        <input type="text" name="keyword" placeholder="输入关键词搜索..." th:value="${keyword}">
                        <i onclick="document.forms['search'].submit()" class="search link icon"></i>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <a href="#" class="ui menu toggle basic black icon button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </a>
</nav>

<!--音乐播放器 -->
<div th:fragment="aplayer" class="aplayer m-mobile-hide" data-type="playlist" data-id="2743834600" data-server="netease"
     data-mode="fixed">
</div>

<!--底部--><!-- inverted -->
<footer th:fragment="footer" class="ui vertical segment footer-bj">
    <div class="ui center aligned container m-text-lined">
        <div class="m-text-thin m-text-spaced m-opacity-mini">【事实并非理所当然<span class="blink">❤️</span>世界总是欲盖弥彰】</div>
        <div class="m-text-thin m-text-spaced m-opacity-mini">
            本站已倔强运行:
            <span id="runtime" style="color: #24a0f0;"></span>
        </div>
        <div class="m-text-thin m-text-spaced m-opacity-mini">友情链接：
            <a href="#">申请坑位</a>/
            <a href="#">申请坑位</a>/
            <a href="#">申请坑位</a>
        </div>
        <div class="ui inverted  divider"></div>
        <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © <span id="runtime_start">2016</span> - <span id="runtime_end">2022</span> Designed by sansui</p>
        <div class="m-text-thin m-text-spaced m-opacity-mini">
            <a target="_blank"
               href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=41010302002924"
               style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
                <p style="line-height:20px;margin: 0px 10px 0px 5px; color:#000000;">
                    <img src="" th:src="@{/images/beian.png}" style="height: auto;max-width: 100%;vertical-align: middle;"/>
                    <span th:text="#{index.gongan}"></span>
                </p>
            </a>
            <br class="m-mobile-show"/>
            <a href="https://beian.miit.gov.cn/" style="color:#000000;" target="_blank" th:text="#{index.beianhao}"></a>
            <span id="tongji">
            </span>
        </div>
    </div>
</footer>

<!--js-->
<th:block th:fragment="script">
    <script src="../../../static/lib/jquery/jquery.min.js" th:src="@{/lib/jquery/jquery.min.js}"></script>
    <script src="../static/js/dist/semantic.min.js" th:src="@{/lib/semanticui/dist/semantic.min.js}"></script>
    <!--引入semantic的js-->
    <script src="../../../static/lib/jquery/jquery.scrollTo.min.js" th:src="@{/lib/jquery/jquery.scrollTo.min.js}"></script>
    <!--线条背景 https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js-->
    <script type="text/javascript" color="54,54,54" opacity='0.7' zIndex="-2" count="99"
            src="../../../static/lib/canvas-nest/canvas-nest.min.js" th:src="@{/lib/canvas-nest/canvas-nest.min.js}"></script>
    <!--背景-->
    <script src="../../../static/lib/prism/prism.js" th:src="@{/lib/prism/prism.js}"></script>
    <script src="../../../static/lib/tocbot/tocbot.min.js" th:src="@{/lib/tocbot/tocbot.min.js}"></script>
    <script src="../../../static/lib/qrcode/qrcode.min.js" th:src="@{/lib/qrcode/qrcode.min.js}"></script>
    <script src="../../../static/lib/waypoints/jquery.waypoints.min.js"
            th:src="@{/lib/waypoints/jquery.waypoints.min.js}"></script>
    <script src="../../../static/lib/aplayer/APlayer.min.js" th:src="@{/lib/aplayer/APlayer.min.js}"></script>
    <script src="../../../static/lib/aplayer/Meting.min.js" th:src="@{/lib/aplayer/Meting.min.js}"></script>
    <script src="../../../static/js/me.js" th:src="@{/js/me.js}"></script>
</th:block>

</body>
</html>